<template>
  <div class="content">
    <div style="height: 44px; background:#fff; line-height: 44px; text-align: center">道馆首页</div>
    <div class="wrap">
      <div class="club_header">
        <div>
          <img class="club_img" :src="getStaticFileUrl(previewData.imagePath)">
        </div>
        <div class="club_info">
          <div class="club_title">{{ previewData.name }}</div>
          <div class="club_text">
            <div>{{ previewData.address }}</div>
          </div>
          <div class="club_text">
            <div class="txt_mr">{{ previewData.linkName }}</div>
            <div>{{ previewData.linkPhoneNumber }}</div>
          </div>
          <div class="club_text club_mem_num">
            <div class="flex_1">
              <div class="txt_mr">教练</div>
              <div>{{ previewData.coachNumber }}人</div>
            </div>
            <div class="flex_1">
              <div class="txt_mr">学员</div>
              <div>{{ previewData.studentNumber }}人</div>
            </div>
          </div>
        </div>
        <div class="focus_start">
          <!-- <u-icon name="star" color="#D9D9D9" size="14"></u-icon> -->
          <!-- <u-icon name="star-fill" color="#D9D9D9" size="14"></u-icon> -->
        </div>
      </div>
    </div>

    <div class="tab_box">
      <ul>
        <li class="tab_item active">首页</li>
        <li>课程</li>
        <li>师资力量</li>
        <li>优秀学员</li>
      </ul>
    </div>
    <div class="tab_wrap">
      <div v-if="tabCurrent === 0 && swiperImgs.length">
        <div>
          <div class="module_title">明星教练</div>
          <div class="module_content module_p_30">
            <div v-show="swiperImgs.length" class="mall_page mall_swiper">
              <swiper ref="mySwiper" :options="swiperOptions">
                <swiper-slide v-for="(item, index) in swiperImgs" :key="index">
                  <img class="photo_img mb_20" :src="getStaticFileUrl(item.imagePath)">
                  <div class="photo_name">{{ item.name }}</div>
                </swiper-slide>
                <div slot="pagination" class="swiper-pagination" style="margin: -10px;" />
              </swiper>
            </div>
          </div>
        </div>

        <div>
          <div class="module_title">道馆介绍</div>
          <div class="module_content module_p_20">
            <div v-html="previewData.content" />
          </div>
        </div>
      </div>

      <div v-if="tabCurrent === 1" class="tab_ptop">
        <div class="module_course">
          <div class="course_top">
            <img class="course_img" src="https://picsum.photos/id/233/300/300" mode="">
            <div class="course_info">
              <div class="course_title">基础腿法基础腿法基础腿法基础腿法基础腿法</div>
              <div class="course_tags">
                <div class="course_tag">散打</div>
                <div class="course_tag">散打</div>
              </div>
            </div>
          </div>
          <div class="course_intro">散打是两人按照一定的规则，并运用武术中的踢、打、摔等攻防技法制服对方的、徒手对抗的武术项目。</div>
          <div class="course_btn" @click="openPopup">
            <div>详细课程</div>
          </div>
        </div>
      </div>

      <div v-if="tabCurrent === 2" class="tab_ptop">
        <div class="module_teacher">
          <div class="teacher_top">
            <div>
              <img class="photo_img" src="https://picsum.photos/id/233/300/300">
            </div>
            <div class="teacher_top_info">
              <div class="teacher_name">孙绍涵</div>
              <div class="course_tags teacher_tags">
                <div class="course_tag">180cm</div>
                <div class="course_tag">70kg</div>
              </div>
              <div class="teacher_nation">中国</div>
            </div>
          </div>
          <div>
            <div class="teacher_info_item">
              <div class="teacher_item_label">运动项目</div>
              <div class="teacher_item_content">教练团队</div>
            </div>
            <div class="teacher_info_item">
              <div class="teacher_item_label">运动生涯</div>
              <div class="teacher_item_content">国家一级运动员，一级教练员，一级裁判员，武术五段。 2008年河南省武术学校比赛56Kg第二名。 2008年全国武术馆校散打比赛60Kg第三名。 2009年第八届山西省武术学校比赛56Kg第一名。</div>
            </div>
          </div>
        </div>
        <div class="module_teacher">
          <div class="teacher_top">
            <div>
              <img class="photo_img" src="https://picsum.photos/id/233/300/300">
            </div>
            <div class="teacher_top_info">
              <div class="teacher_name">孙绍涵</div>
              <div class="course_tags teacher_tags">
                <div class="course_tag">180cm</div>
                <div class="course_tag">70kg</div>
              </div>
              <div class="teacher_nation">中国</div>
            </div>
          </div>
          <div>
            <div class="teacher_info_item">
              <div class="teacher_item_label">运动项目</div>
              <div class="teacher_item_content">教练团队</div>
            </div>
            <div class="teacher_info_item">
              <div class="teacher_item_label">运动生涯</div>
              <div class="teacher_item_content">国家一级运动员，一级教练员，一级裁判员，武术五段。 2008年河南省武术学校比赛56Kg第二名。 2008年全国武术馆校散打比赛60Kg第三名。 2009年第八届山西省武术学校比赛56Kg第一名。</div>
            </div>
          </div>
        </div>
      </div>

      <div v-if="tabCurrent === 3" class="tab_ptop">
        <div class="module_student">
          <div>
            <img class="photo_img" src="https://picsum.photos/id/233/300/300">
          </div>
          <div class="student_info">
            <div>
              <div class="student_name">
                <div class="mr_20">孙绍涵</div>
                <div class="student_gender">女</div>
              </div>
              <div class="course_tags">
                <div class="course_tag">13岁</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { api_GET_ClubTeachingCoach } from '@/extend/api/hallswaggerApi/app.js';
export default {
  props: {
    previewData: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data() {
    return {
      offTop: 0,
      tabTitle: [
        { name: '首页' },
        { name: '课程' },
        { name: '师资力量' },
        { name: '优秀学员' }
      ],
      tabCurrent: 0,
      showPopup: false,
      swiperImgs: [],
      swiperOptions: {
        init: false,
        slidesPerView: 3, // 显示个数
        spaceBetween: 25,
        width: 300,
        height: 120,
        loop: true,
        autoplay: {
          delay: 3000,
          disableOnInteraction: false
        },
        pagination: {
          el: '.swiper-pagination'
        }
      }
    };
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.swiper;
    },
    activeStyle() {
      return {
        color: '#354569',
        fontWeight: '500'
      };
    },
    inactiveStyle() {
      return {
        color: '#828282',
        transform: 'scale(1)'
      };
    }
  },
  created() {
    this.getTopCoachList();
    this.previewData.content = this.formatRichText(this.previewData.content);
  },
  methods: {
    getTopCoachList() {
      api_GET_ClubTeachingCoach({
        Page: 1,
        SkipCount: 0,
        MaxResultCount: 10,
        IsTop: true
      }).then(
        res => {
          if (res) {
            this.swiperImgs = res.items || [];
            // 轮播处理
            this.$nextTick(() => {
              this.swiper.init();
            });
          }
        },
        error => {
          const _msg = error.error.message || error.message;
          this.$message({ type: 'error', message: _msg });
          this.loading = false;
        }
      );
    },
    // 控制小程序中图片大小
    formatRichText(html) {
      let newContent = html.replace(/<img[^>]*>/gi, function (match, capture) {
        console.log(match.search(/style=/gi));
        if (match.search(/style=/gi) === -1) {
          match = match.replace(/\<img/gi, '<img style=""');
        }
        return match;
      });
      newContent = newContent.replace(
        /style="/gi,
        '$& max-width:100% !important; '
      );
      newContent = newContent.replace(/<br[^>]*\/>/gi, '');
      return newContent;
    },
    tabClick(val) {
      this.tabCurrent = val.index;
    },
    openPopup() {
      this.showPopup = true;
    },
    closePopup() {
      this.showPopup = false;
    },
    // 获取静态文件
    getStaticFileUrl(relativeUrl) {
      if (!relativeUrl) return '';
      return WEB_CONFIG.VUE_APP_STATIC_FILE_RUL + relativeUrl;
    }
  }
};
</script>

<style lang="scss" scoped>
.content {
  width: 375px;
  height: 669px;
  padding: 1px 0 0 0;
  overflow: hidden;
  background: #FCFCFC;
  box-shadow: 0 1px 7px rgba(53, 69, 105, 0.1);
}
.content::-webkit-scrollbar {
  width: 2px;
}
.wrap {
  padding: 15px 10px 10px;
}
.mb_20 {
  margin-bottom: 20px;
}
.mr_20 {
  margin-right: 20px;
}

.club_header {
  position: relative;
  display: flex;
  padding: 10px;
  background: #ffffff;
  box-shadow: 0 1px 7px rgba(53, 69, 105, 0.1);
  border-radius: 6px;
}
.club_img {
  width: 55px;
  height: 55px;
  border-radius: 50%;
}
.club_info {
  flex: 1;
  padding-left: 15px;
}
.club_title {
  font-weight: 500;
  font-size: 14px;
  line-height: 16px;
  color: #353434;
  margin-bottom: 5px;
}
.club_text {
  margin-bottom: 5px;
  font-size: 12px;
  line-height: 17px;
  font-weight: 400;
  color: #353434;
}
.txt_mr {
  margin-right: 10px;
}
.flex_1 {
  display: flex;
  flex: 1;
}
.club_mem_num {
  display: flex;
}
.focus_start {
  position: absolute;
  top: 10px;
  right: 10px;
}

.tab_wrap {
  padding: 0 10px;
  height: 400px;
  overflow: hidden;
  overflow-y: auto;
}
.module_title {
  display: flex;
  align-items: center;
  height: 40px;
  padding: 0 25px;
  font-weight: 500;
  font-size: 15px;
  line-height: 21px;
  color: #353434;
}
.module_content {
  min-height: 50px;
  background: #fff;
  border: 1px solid #fff;
  box-shadow: 0 1px 7px rgba(53, 69, 105, 0.1);
  border-radius: 6px;
}
.module_p_30 {
  padding: 15px;
}
.module_p_20 {
  padding: 10px;
}
.photo_img {
  width: 75px;
  height: 90px;
  border-radius: 4px;
}
.photo_name {
  width: 75px;
  font-weight: 400;
  font-size: 14px;
  line-height: 18px;
  color: #353434;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}
// 课程
.tab_ptop {
  padding-top: 10px;
}
.module_course {
  background: #ffffff;
  box-shadow: 0 3px 16px rgba(0, 0, 0, 0.06);
  border-radius: 8px;
}
.course_top {
  display: flex;
  padding: 10px;
}
.course_img {
  width: 100px;
  height: 75px;
  border-radius: 4px;
}
.course_info {
  flex: 1;
  padding-left: 5px;
}
.course_title {
  font-weight: 500;
  font-size: 15px;
  line-height: 21px;
  color: #353434;
  margin-bottom: 5px;
}
.course_tags {
  display: flex;
}
.course_tag {
  padding: 1px 6px;
  margin-right: 10px;
  background: rgba(207, 55, 46, 0.05);
  border-radius: 17px;
  font-weight: 400;
  font-size: 11px;
  line-height: 16px;
  color: #cf372e;
}
.course_intro {
  padding: 0 10px 10px;
  font-weight: 400;
  font-size: 12px;
  line-height: 17px;
  color: #353434;
}
.course_btn {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 55px;
  background: #f5f8ff;
  border-radius: 0 0 6px 6px;
  font-weight: 400;
  font-size: 14px;
  line-height: 15px;
  color: #353434;
}
// 详细课程弹窗
.course_detail {
  width: 95vw;
  height: 60vh;
}
.course_detail_title {
  display: flex;
  align-items: center;
  height: 110px;
  padding: 0 30px;
  font-weight: 500;
  font-size: 32px;
  line-height: 45px;
  color: #353434;
  background: #f5f8fd;
  border-radius: 10px 10px 0 0;
}
.course_banner {
  display: flex;
  padding: 30px 20px;
}
.course_banner_img {
  width: 200px;
  height: 150px;
  border-radius: 8px;
}
.course_banner_info {
  flex: 1;
  padding-left: 10px;
}
.course_bi_title {
  font-weight: 500;
  font-size: 30px;
  line-height: 42px;
  color: #353434;
  margin-bottom: 23px;
}
.course_intro_title {
  display: flex;
  align-items: center;
  height: 80px;
  padding: 0 20px;
  font-weight: 500;
  font-size: 28px;
  line-height: 39px;
  color: #353434;
}
.course_intro_content {
  padding: 0 20px 30px;
  font-weight: 400;
  font-size: 24px;
  line-height: 34px;
  color: #353434;
}
// 师资
.module_teacher {
  background: #ffffff;
  box-shadow: 0 6px 32px rgba(0, 0, 0, 0.06);
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 20px;
}
.teacher_top {
  display: flex;
  margin-bottom: 20px;
}
.teacher_name {
  padding-top: 9px;
  font-weight: 500;
  font-size: 30px;
  line-height: 42px;
  color: #353434;
  margin-bottom: 23px;
}
.teacher_tags {
  margin-bottom: 5px;
}
.teacher_nation {
  font-weight: 400;
  font-size: 28px;
  line-height: 39px;
  color: #353434;
}
.teacher_info_item {
  display: flex;
  margin-bottom: 10px;
}
.teacher_item_label {
  padding-right: 10px;
  font-weight: 400;
  font-size: 24px;
  line-height: 34px;
  color: #afafaf;
}
.teacher_item_content {
  flex: 1;
  font-weight: 400;
  font-size: 24px;
  line-height: 34px;
  color: #353434;
}
.teacher_top_info {
  flex: 1;
  padding-left: 20px;
}
// 优秀学员
.module_student {
  display: flex;
  padding: 20px;
  margin-bottom: 20px;
  background: #ffffff;
  box-shadow: 0 6px 32px rgba(0, 0, 0, 0.06);
  border-radius: 16px;
}
.student_info {
  flex: 1;
  padding-left: 20px;
}
.student_name {
  display: flex;
  margin-bottom: 33px;
  padding-top: 39px;
  font-weight: 500;
  font-size: 30px;
  line-height: 42px;
  color: #353434;
}
.student_gender {
  font-weight: 400;
  font-size: 28px;
  line-height: 42px;
  color: #353434;
}
.tab_box {
  width: 100%;
  box-sizing: border-box;
  // padding: 0 20px;
  font-size: 14px;
  ul {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 1;
    height: 55px;
    padding: 30px 20px;
    background: #F5F6F7;
    color: #8C8C8C;
  }
  .tab_item {
    position: relative;
  }
  .tab_item.active {
    color: #354569;
    font-weight: bold;
  }
  .tab_item.active::after {
    position: absolute;
    display:block;//块级元素
    width: 100%;
    height:1px;
    left: 0;
    bottom: -5px;
    content: '';
    border: 1px solid #354569;
  }
}

// swiper
.swiper-container {
  width: 100%;
  height: 100%;
}
.mall_swiper {
  height: 150px;
}
.img_style {
  width: 100%;
  height: 100%;
  cursor: pointer;
}
</style>
